import {useState, useEffect} from 'react';
import {Outlet} from 'react-router-dom';
import {Header, Footer, UserCard} from '@components/front';
import {useTheme} from '@mui/material/styles';
import {Container, Box} from '@mui/material';
import {getBlogSettingDetail, UserCardData} from '@services/front/blogSetting';

export default function Dashboard() {
    const theme = useTheme();
    const headerHeight = {xs: 56, sm: 64};
    const footerHeight = 64;
    const [user, setBlogSettings] = useState<UserCardData | null>(null);

    useEffect(() => {
        const fetchUserData = async () => {
            try {
                const userData = await getBlogSettingDetail();
                setBlogSettings(userData);
            } catch (error) {
                console.error('Error fetching user data:', error);
            }
        };
        fetchUserData();
    }, []);

    return (
        <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            width: '100%',
            bgcolor: theme.palette.background.default,
            color: theme.palette.text.primary,
            transition: 'background 0.3s, color 0.3s',
        }}>
            <Box
                component="div"
                sx={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'background.default',
                    zIndex: -1
                }}
            />
            <Header/>
            <Box
                component="main"
                sx={{
                    flex: 1,
                    display: 'flex',
                    flexDirection: 'column',
                    pt: {xs: `${headerHeight.xs}px`, sm: `${headerHeight.sm}px`},
                    pb: `${footerHeight}px`,
                    minHeight: 0,
                }}
            >
                <Container
                    maxWidth={false}
                    disableGutters
                    sx={{
                        flex: 1,
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'flex-start',
                        gap: 2,
                        minHeight: 0,
                        px: '50px',
                        pt: '15px'
                    }}
                >
                    <Box sx={{
                        flex: 3.5,
                        minWidth: 0,
                        display: 'flex',
                        gap: 2,
                        '& > *': {
                            width: '100%',
                            maxWidth: 'none'
                        }
                    }}>
                        <Outlet/>
                    </Box>
                    <Box sx={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column'}}>
                        {user && <UserCard {...user} />}
                    </Box>
                </Container>
            </Box>
            <Footer/>
        </Box>
    );
}
